<template>
    <div class="flex">
        <V3Echarts :width="props.width" :height="props.height" :options="option" :top="10" />
    </div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue'
import V3Echarts from '@/stories/components/V3Echarts/index.vue'

const props = defineProps({
    chartData: {
        type: Object,
        default: () => {
            return {
                yAxis: ['1F-康复大厅', '1F-妇科', '1F-功能检查中心', '1F-内科', '1F-健康管理中心', 'B1F-急诊', 'B1F-儿科', '门诊大厅综合屏', '诊室屏', '综合屏', '分管区'],
                value: [
                    {
                        name: '在线',
                        data: [320, 302, 301, 334, 390, 330, 320, 390, 330, 320, 320]
                    },
                    {
                        name: '离线',
                        data: [12, 13, 11, 34, 0, 23, 21, 2, 5, 7, 4]
                    }
                ]
            }
        }
    },
    width: {
        type: Number,
        default: 1000
    },
    height: {
        type: Number,
        default: 550
    },
    color: {
        type: Array,
        default: () => ['#00ffb8', '#fad376']
    }
})

let option = ref({})

const initChart = () => {
    const series = props.chartData.value.map((item: any) => {
        return {
            name: item.name,
            type: 'bar',
            stack: 'total',
            label: {
                show: false
            },
            emphasis: {
                focus: 'series'
            },
            data: item.data
        }
    })

    option.value = {
        color: props.color,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            textStyle: {
                color: '#FFFFFF'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.85)'
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            data: props.chartData.yAxis,
            axisLabel: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.85)'
            },
            axisTick: {
                show: false
            }
        },
        series
    }
}

watch(
    () => props.chartData,
    newValue => {
        initChart()
    },
    { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.flex {
    width: 100%;
    height: v-bind('props.height');
}
</style>
